<template>
  <div class="p-2">
    <a-form class="smart-query-form">
      <a-row class="smart-query-form-row">
        <a-form-item label="流程标识" class="smart-query-form-item">
          <a-input v-model:value="queryParams.processKey" placeholder="请输入流程标识" style="width: 200px" />
        </a-form-item>
        <a-form-item label="流程名称" class="smart-query-form-item">
          <a-input v-model:value="queryParams.processName" placeholder="请输入流程名称" style="width: 200px" />
        </a-form-item>
        <a-form-item label="流程分类" class="smart-query-form-item">
          <a-select v-model:value="queryParams.category" placeholder="请选择" allowClear style="width: 200px">
            <a-select-option v-for="item in categoryOptions" :key="item.categoryId" :value="item.code">
              {{ item.categoryName }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item class="smart-query-form-item smart-margin-left10">
          <a-button-group>
            <a-button type="primary" @click="handleQuery">
              <template #icon><SearchOutlined /></template>
              搜索
            </a-button>
            <a-button @click="resetQuery">
              <template #icon><ReloadOutlined /></template>
              重置
            </a-button>
          </a-button-group>
        </a-form-item>
      </a-row>
    </a-form>

    <a-card size="small" :bordered="false">
      <a-row class="smart-table-btn-block">
        <div class="smart-table-operate-block">
          <a-button @click="handleExport">
            <template #icon><DownloadOutlined /></template>
            导出
          </a-button>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
        </div>
      </a-row>

      <a-table :loading="loading" :columns="columns" :dataSource="processList" :pagination="false" bordered>
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'processName'">
            <a @click="handleProcessView(record)">{{ record.processName }}</a>
          </template>
          <template v-if="column.dataIndex === 'version'">
            <a-tag>v{{ record.version }}</a-tag>
          </template>
          <template v-if="column.dataIndex === 'status'">
            <a-tag :color="record.suspended ? 'warning' : 'success'">
              {{ record.suspended ? '挂起' : '激活' }}
            </a-tag>
          </template>
          <template v-if="column.dataIndex === 'action'">
            <a-tooltip title="发起">
              <a-button type="link" @click="handleStart(record)">
                <template #icon><PlayCircleOutlined /></template>
                发起
              </a-button>
            </a-tooltip>
          </template>
        </template>
      </a-table>

      <div class="smart-query-table-page">
        <a-pagination
          v-show="total > 0"
          :total="total"
          v-model:current="queryParams.pageNum"
          v-model:pageSize="queryParams.pageSize"
          @change="getList"
          showSizeChanger
          showQuickJumper
        />
      </div>
    </a-card>

    <!-- 流程图 -->
    <a-modal :title="processDialog.title" v-model:open="processDialog.visible" width="70%">
      <process-viewer :key="`designer-${reloadIndex}`" :xml="processXml" :style="{ height: '650px' }" />
    </a-modal>
  </div>
</template>

<script setup name="WorkProcess">
  import { categoryApi } from '/@/api/workflow/category';
  import { processApi } from '/@/api/workflow/work';
  import { message } from 'ant-design-vue';
  const router = useRouter();
  const { proxy } = getCurrentInstance();

  const processList = ref([]);
  const loading = ref(true);
  const showSearch = ref(true);
  const total = ref(0);
  const reloadIndex = ref(0);
  const processXml = ref('');
  const categoryOptions = ref([]);

  const queryFormRef = ref();

  const processDialog = reactive({
    visible: false,
    title: '流程图',
  });

  const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    processKey: '',
    processName: '',
    category: '',
  });

  const columns = [
    {
      title: '流程标识',
      dataIndex: 'processKey',
      ellipsis: true,
    },
    {
      title: '流程名称',
      dataIndex: 'processName',
      ellipsis: true,
    },
    {
      title: '流程分类',
      dataIndex: 'category',
      customRender: ({ record }) => categoryFormat(record),
    },
    {
      title: '流程版本',
      dataIndex: 'version',
    },
    {
      title: '状态',
      dataIndex: 'status',
    },
    {
      title: '部署时间',
      dataIndex: 'deploymentTime',
      width: 180,
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: 180,
      fixed: 'right',
    },
  ];

  /** 查询流程分类列表 */
  const getCategoryList = async () => {
    const res = await categoryApi.listAllCategory();
    categoryOptions.value = res.data;
  };

  /** 查询流程列表 */
  const getList = async () => {
    loading.value = true;
    try {
      const { data } = await processApi.listProcess(queryParams.value);
      processList.value = data.list;
      total.value = data.total;
    } finally {
      loading.value = false;
    }
  };

  /** 搜索按钮操作 */
  const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
  };

  /** 重置按钮操作 */
  const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
  };

  /** 查看流程图 */
  const handleProcessView = async (row) => {
    reloadIndex.value++;
    const res = await processApi.getBpmnXml(row.definitionId);
    processXml.value = res.data;
    processDialog.visible = true;
  };

  /** 发起流程 */
  const handleStart = (row) => {
    router.push({
      path: '/work/start/' + row.deploymentId,
      query: {
        definitionId: row.definitionId,
        processKey: row.processKey,
      },
    });
  };

  /** 导出按钮操作 */
  const handleExport = () => {
    proxy?.download(
      'workflow/process/startExport',
      {
        ...queryParams.value,
      },
      `start_process_${new Date().getTime()}.xlsx`
    );
  };

  const categoryFormat = (row) => {
    return categoryOptions.value.find((k) => k.code === row.category)?.categoryName ?? '';
  };

  onMounted(() => {
    getCategoryList();
    getList();
  });
</script>
